<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../js/react.js"></script>
  <script src="../js/react-dom.js"></script>
  <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
  <script src="../js/jquery.js"></script>
  <title>demo12</title>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var RepoList = React.createClass({
  getInitialState: function() {
    return {loading: true, error: null, data: null}
  },
  componentDidMount: function() {
    this.props.promise.then(
      value => this.setState({loading: false, data: value}),
      error => this.setState({loading: false, error: error})
    );
  },
  render: function() {
    if (this.state.loading) {
      return (
        <span>Loading...</span>
      )
    } else if (this.state.error !== null) {
      return (
        <span>Error: {this.state.error.message}</span>
      )
    } else {
      var repos = this.state.data.items;
      var repoList = repos.map(function(repo) {
        return (
          <li>
            <a href={repo.html_url}>{repo.name}</a>{repo.stargazers_count} stars
            <br/>
            {repo.description}
          </li>
        )
      });
      return (
        <main>
        <h1>github上最受欢迎的js项目</h1>
        <ol>{repoList}</ol>
        </main>
      )
    }
  }
});
ReactDOM.render(
  <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
  document.getElementById('example')
)
</script>
</body>
</html>
